<template>
  <div class="app-container">
    <div class="boardtitle1">
      <img src="@/assets/images/drive1.png" alt="" /><span
        >待审单车辆:
        <div class="textColor">{{ examLength }}</div></span
      >
    </div>
    <div class="distrPlatformContent">
      <div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              label-width="68px"
              class="platform"
            >
              <el-form-item label="司机:" prop="driverName">
                <el-input
                  v-model="queryParams.driverName"
                  placeholder="请输入司机名称"
                  clearable
                  @keyup.enter.native="handlePlatform"
                />
              </el-form-item>
              <el-form-item label="车牌号:" prop="carNumber">
                <el-input
                  v-model="queryParams.carNumber"
                  placeholder="请输入车牌号"
                  clearable
                  @keyup.enter.native="handlePlatform"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handlePlatform"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetPlatform"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="distrPlatformBox">
        <div
          class="distrPlatformBoxItem"
          v-for="(item, index) in reservationList"
          :key="index"
          :style="{
            backgroundColor: item.color === 'red' ? '#e64a19' : '#4caf50',
          }"
        >
          <div class="serialNum">{{ index + 1 }}</div>
          <!-- <div>
            <span class="distrPlatformleft">司机姓名：</span
            ><span class="distrPlatformright">{{ item.driverName }}</span>
          </div> -->
          <!-- <div>
            <span class="distrPlatformleft">车牌号：</span
            ><span class="distrPlatformright">{{ item.carNumber }}</span>
          </div> -->
          <!-- <div>
            <span class="distrPlatformleft">送货单数：</span
            ><span class="distrPlatformright">{{ item.sendOrder }}</span>
          </div> -->
          <div>
            <span class="distrPlatformleft">送货件数：</span
            ><span class="distrPlatformright">{{ item.sendCount }}</span>
          </div>
          <div>
            <span class="distrPlatformleft">货物类型：</span
            ><span class="distrPlatformright">{{
              item.goodsType | goodsTypes(that)
            }}</span>
          </div>
          <div>
            <span class="distrPlatformleft">过号次数：</span
            ><span class="distrPlatformright">{{ item.outNum }}</span>
          </div>
          <div>
            <span class="distrPlatformleft">时间段：</span
            ><span class="distrPlatformright"
              >{{ item.startSlot }}~{{ item.endSlot }}</span
            >
          </div>
          <div>
            <span class="distrPlatformleft">签到时间：</span
            ><span class="distrPlatformright">{{ item.signDate }}</span>
          </div>
          <div>
            <span class="distrPlatformleft">过号时间：</span
            ><span class="distrPlatformright">{{ item.outDate }}</span>
          </div>
          <div
            class="lockBtn"
            v-if="item.isLock == '0'"
            @click="handlelock(item)"
          >
            <img src="@/assets/images/unlock.png" alt="" />
          </div>
          <div v-else class="lockBtn">
            <img src="@/assets/images/lock.png" alt="" />
          </div>
          <div class="checkBtn">
            <!-- <el-button
              v-if="item.reservationStatus == '1'"
              size="mini"
              type="primary"
              @click="handleCheck(item.carNumber)"
              >待审核</el-button
            > -->
          </div>
        </div>
      </div>
    </div>
    <!-- 添加或修改预约管理对话框 -->
    <el-dialog
      title="审核"
      :visible.sync="open"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table
        v-loading="loading"
        :data="platformList"
        :row-style="rowStyle"
        @row-click="handleRowClick"
        @select="platSelection"
        @select-all="selectAll"
        ref="multipleTable"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <!-- <el-table-column label="主键" align="center" prop="id" /> -->
        <el-table-column label="司机姓名" align="center" prop="driverName" />
        <el-table-column label="车牌号" align="center" prop="carNumber" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="时间段" align="center" prop="timeSlot">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.time_slot"
              :value="scope.row.timeSlot"
            />
          </template>
        </el-table-column>
        <el-table-column label="送货单数" align="center" prop="sendOrder" />
        <el-table-column label="送货件数" align="center" prop="sendCount" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleSignin(scope.row)"
              >取消签到</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleAppoint(scope.row)"
              >取消预约</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listplatReservation,
  updateReservation,
  carList,
  lockList,
} from "@/api/system/reservation";
import {
  getreservationCount,
  getSelectReservationList,
  getSelectReservationArray,
} from "@/api/login";
export default {
  dicts: [
    "sys_normal_disable",
    "send_channel",
    "time_slot",
    "work_status",
    "warehouse",
    "enable_status",
    "goods_type",
  ],
  data() {
    return {
      // 月台分配列表
      platformList: [],
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      reservationList: [],
      goodsColumns: [],
      that: this,
      // 待审单数量
      examLength: 0,
      // 查询参数
      queryParams: {
        driverName: null,
        carNumber: null,
      },
      // 车辆信息
      checkCar: null,
      // 月台列表查询参数
      Allocaplattotal: 0,
      // 已分配月台id
      platdata: null,
      reservationNum: null,
      // timer: null,
    };
  },
  created() {
    this.handleExam("1");
    this.getDicts("goods_type").then((response) => {
      console.log(response.data);
      response.data.forEach((item) => {
        this.goodsColumns.push({
          value: item.dictValue,
          label: item.dictLabel,
        });
      });
    });
  },
  mounted() {
    // this.startRefresh();
  },
  beforeDestroy() {
    // this.stopRefresh();
  },
  filters: {
    goodsTypes(value, that) {
      const dict = {};
      that.goodsColumns.forEach((item) => {
        dict[item.value] = item.label;
      });
      return dict[value] || value;
    },
  },
  methods: {
    // startRefresh() {
    //   this.timer = setInterval(() => {
    //     // this.handleExam("1");
    //   },5000);
    // },
    // stopRefresh() {
    //   clearInterval(this.timer);
    // },
    // 分配月台确定
    submitForm() {
      if (this.platdata == null) {
        this.$message({
          type: "warning",
          message: "请选择一条数据!",
        });
      } else {
        this.$confirm("是否通过审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            updateReservation({
              id: this.platdata,
              reservationStatus: "2",
            }).then((res) => {
              this.handleExam("1");
              this.updatecarcheck();
              this.open = false;
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    // 更新车辆审核列表
    updatecarcheck() {
      carList({ carNumber: this.checkCar }).then((response) => {
        this.platformList = response.data;
        this.Allocaplattotal = response.total;
        this.loading = false;
      });
    },
    handleExam(number) {
      getSelectReservationList({
        reservationStatus: number,
        ...this.queryParams,
      }).then((res) => {
        this.reservationList = res.data;
        this.examLength = res.data.length;
      });
    },
    handleCheck(carNumber) {
      this.open = true;
      this.checkCar = carNumber;
      carList({ carNumber: carNumber }).then((response) => {
        this.platformList = response.data;
        this.Allocaplattotal = response.total;
        this.loading = false;
      });
    },
    handlelock(item) {
      lockList({
        carNumber: item.carNumber,
        sendDate: item.sendDate,
        sendOrder: item.sendOrder,
        sendCount: item.sendCount,
        goodsType: item.goodsType,
        id: item.id,
        isLock: "1",
      }).then((res) => {
        this.$modal.msgSuccess(res.msg);
        this.handleExam("1");
      });
    },
    selectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    // 月台行选择
    handleRowClick(row) {
      this.platdata = row.id;
      console.log(row.id);
    },
    rowStyle({ row, rowIndex }) {
      if (this.platdata === row.id) {
        return {
          "background-color": "#68ffeb",
          cursor: "pointer",
        };
      }
    },
    platSelection(selection, row) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
      // this.platdata = row.id;
      // this.reservationNum = row.platformCode;
      if (this.ids.length > 1) {
        let del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
      if (selection.length == 0) {
        this.platdata = null;
        this.reservationNum = null;
        return;
      }
    },
    // 搜索
    handlePlatform() {
      this.handleExam("1");
    },
    // 重置
    resetPlatform() {
      this.resetForm("queryForm");
      this.handlePlatform();
    },
    // 取消签到
    handleSignin(row) {
      this.$confirm("请确认是否取消签到?", "取消签到", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateReservation({ id: row.id, reservationStatus: "0" }).then(
            (res) => {
              this.updatecarcheck();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 取消预约
    handleAppoint(row) {
      updateReservation({ id: row.id, reservationStatus: "6" }).then((res) => {
        this.updatecarcheck();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.boardtitle1 {
  font-size: 16px;
  color: #303133;
  width: 150px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1px solid #f3f3f3;

  img {
    width: 20%;
  }
  span {
    display: flex;
    justify-content: center;
    padding: 5px;
  }

  .textColor {
    color: #00d85a;
  }
}
.distrPlatformContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 900px;
  overflow-y: auto;
  border: 1px solid #ececec;
  padding: 10px 20px;
  .distrPlatformBox {
    // width: 49%;
    // overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: -10px;

    .distrPlatformBoxItem {
      width: 244px;
      // min-height: 180px;
      min-height: 150px;
      margin-bottom: 10px;
      margin-right: 10px;
      position: relative;
      box-sizing: border-box;
      border-radius: 8px;
      border: 1px solid #ebecf0;
      color: #fff;
      padding: 20px;
      line-height: 1.4;
      font-size: 14px;
      .distrPlatformleft {
        width: 35%;
        display: inline-block;
      }
      .distrPlatformright {
        width: 65%;
        display: inline-block;
      }
      .lockBtn {
        position: absolute;
        right: -50px;
        // bottom: 80px;
        bottom: 65px;
        cursor: pointer;
        img {
          width: 30%;
        }
      }
      .checkBtn {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }

      .serialNum {
        position: absolute;
        right: 10px;
        top: 10px;
        font-weight: 700;
        font-size: 18px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 50%;
        color: #fdac4e;
        border: 1px solid #fcb868;
      }
    }
  }
}
</style>